<template>
  <div>
    <template v-if="info.paramFromType === BwFromTypeEnum.constValue">
      <a-input
        class="column-item"
        placeholder="请输入常量值"
        v-model:value="curParam.constValue"
      />
    </template>

    <template v-else-if="info.paramFromType === BwFromTypeEnum.comVar">
      <a-input
        class="column-item"
        placeholder="请输入组件变量名称"
        v-model:value="curParam.comVarName"
      />
    </template>

    <template v-else-if="info.paramFromType === BwFromTypeEnum.comProps">
      <a-select
        class="input"
        style="width: 100%"
        placeholder="请选择组件外放变量名称"
        :options="curCurtomComPropList"
        v-model:value="curParam.comPropsName"
      />
    </template>

    <template v-else-if="info.paramFromType === BwFromTypeEnum.forVar">
      <a-select
        class="input"
        style="width: 100%"
        placeholder="请选择节点循环变量"
        :options="curNodeForVarNamepList"
        v-model:value="curParam.nodeForVarName"
      />
    </template>

    <template v-else-if="info.paramFromType === BwFromTypeEnum.slotVar">
      <a-select
        class="input"
        style="width: 100%"
        placeholder="请选择插槽变量"
        :options="curSlotVarList"
        v-model:value="curParam.slotVarName"
      />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useComDesignStoreWithOut, designUtils } from '@/store'
import {
  BwCustomComNodeAttrJsExpParamFromTypeEnum as BwFromTypeEnum,
  // BwCustomComNodeAttrFromTypeEnum as BwFromTypeEnum,
  type BwCustomComNodeAttrJsExpParamModel,
} from '@bitwit/base-com-render'
interface BwJsExtndParamValueProps {
  info: BwCustomComNodeAttrJsExpParamModel
}
const designStore = useComDesignStoreWithOut()

const emit = defineEmits(['chnage'])
const props = withDefaults(defineProps<BwJsExtndParamValueProps>(), {
  info: () => {
    return {} as BwCustomComNodeAttrJsExpParamModel
  },
})

const curParam = computed({
  get: () => props.info ?? {},
  set: (value) => emit('chnage', value),
})

/** 当前自定义组件外放属性列表 */
const curCurtomComPropList = computed(() => {
  const list: Array<Record<string, string>> = []
  const designInfo = designStore.curDesignInfo
  const comProps = designInfo?.comProps

  if (Array.isArray(comProps) && comProps.length) {
    comProps.forEach((item) => {
      list.push({ label: item.name ?? '', value: item.key })
    })
  }
  return list
})

/** 当前自定义组件节点循环变量列表 */
const curNodeForVarNamepList = computed(() => {
  const list: Array<any> = []
  const struct = designStore.getStructList
  const curNodeInfo = designStore.selectNodeEle

  let nodeId = curNodeInfo?.nodeId ?? null
  while (!!nodeId) {
    const nodeInfo = designUtils.findDomNodeInfo(struct, nodeId)?.node
    if (nodeInfo) {
      if (nodeInfo?.nodeForInfo?.visible) {
        list.push(
          {
            value: `${nodeInfo.nodeId}&index`,
            label: `${nodeInfo.nodeName}-循环下标`,
          },
          {
            value: `${nodeInfo.nodeId}&data`,
            label: `${nodeInfo.nodeName}-循环数据`,
          }
        )
      }

      nodeId = nodeInfo.parentNodeId
    } else {
      nodeId = null
    }
  }

  return list
})

/** 当前插槽变量列表 */
const curSlotVarList = computed(() => {
  const list: Array<any> = []
  const struct = designStore.getStructList
  const curNodeInfo = designStore.selectNodeEle

  let nodeId = curNodeInfo?.nodeId ?? null

  while (!!nodeId) {
    const { node: nodeInfo, pNode: pNodeInfo } =
      designUtils.findDomNodeInfo(struct, nodeId) ?? {}

    if (pNodeInfo) {
      if (pNodeInfo?.enableSlotList) {
        const parentNodeSlotCode = nodeInfo?.parentNodeSlotCode
        const slotInfo = pNodeInfo?.enableSlotList?.find(
          (n) => n.conventionSlotInfo?.slotCode === parentNodeSlotCode
        )
        if (slotInfo) {
          const slotParams =
            slotInfo.conventionSlotInfo?.slotParams?.map((item) => {
              return {
                value: `${pNodeInfo.nodeId}&${slotInfo.conventionSlotInfo?.slotCode}&${item.paramKey}`,
                label: `${pNodeInfo.nodeName}-${slotInfo?.conventionSlotInfo?.slotName}-${item.paramName}`,
              }
            }) ?? []
          list.push(...slotParams)
        }
      }

      nodeId = pNodeInfo.nodeId
    } else {
      nodeId = null
    }
  }

  return list
})
</script>

<style lang="less" scoped></style>
